<template>
  <div class="bgf">
    <div class="manage1">
      <div class="from">
        <el-form :inline="true" :model="param" label-width="70px">
          <el-form-item label="区域：">
            <el-cascader
              v-model="idsArr"
              placeholder="请选择省市区"
              :options="province"
              filterable
              :props="props"
              @change="areaCge"
              class="w300"
            />
          </el-form-item>
        </el-form>
      </div>
      &emsp;&nbsp;<el-button type="primary" class="w115" @click="editOpen()"
        >新增商圈</el-button
      >
    </div>
  </div>

  <div class="bgf mart20" v-loading="loading">
    <el-table :data="list">
      <el-table-column
        prop="name"
        min-width="100"
        label="地区"
      ></el-table-column>

      <el-table-column
        prop="level"
        min-width="80"
        label="所在层级"
      ></el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button @click="editOpen(scope.row)" text type="primary"
            >编辑</el-button
          >
          <el-divider direction="vertical" />
          <el-button @click="delRoles(scope.row.id)" text type="primary"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="h70 pad20 flexab">
      <p class="font10 cola4">共 {{ total }} 条</p>
      <el-pagination
        v-model:currentPage="param.pageNumber"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="param.pageSize"
        layout=" sizes, prev , jumper , next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>

  <el-dialog
    v-model="editShow"
    :title="editData.id ? '编辑商圈' : '添加商圈'"
    width="425px"
  >
    <el-form :model="editData" class="demo-form-inline" label-width="70px">
      <el-form-item label="商圈名称">
        <el-input v-model="editData.name" placeholder="输入商圈的名称">
        </el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="tc">
        <el-button @click="editShow = false">取消</el-button>
        <el-button type="primary" @click="editSub">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import areadata from '@/js/city.js'

export default {
  data() {
    return {
      editShow: false,
      loading: false,
      param: {
        pageNumber: 1,
        pageSize: 10,
        parentId: 3581,
      },
      list: [],
      total: 0,
      province: areadata,
      props: {
        label: 'name',
        value: 'id'
      },
      idsArr: [3570, 3571, 3581],
      editData: {
        level: 4,
      },

    }
  },
  created() {
    console.log(areadata)
    this.getList()
    // this.getCate();

  },
  methods: {

    areaCge(val) {
      console.log(val);
      let idx = val.length - 1;
      this.param.parentId = val[idx];
      this.getList(1);
    },

    async editSub() {
      let that = this;
      console.log(that.editData, 'editData');
      let obj = JSON.parse(JSON.stringify(that.editData));
      that.dialogLoading = true;
      if (!obj.name) {
        that.$message.warning('请输入商圈名称');
        return
      }
      // console.log(obj);
      let res = await that.$api.addeditRegion(obj);
      that.dialogLoading = false;

      if (res) {
        that.$message.success(res.message);
        that.getList();
        that.editShow = false;
      }
    },

    editOpen(val) {
      let that = this;
      if (val) {
        console.log(val, 'val--------');
        that.editData = {
          level: val.level,
          name: val.name,
          id: val.id,
          parentId: val.parentId,
        }
      } else {
        that.editData = {
          level: 4,
          parentId: that.param.parentId
        };
      }

      that.editShow = true;
    },

    // 删除
    delRoles(id) {
      let that = this;
      console.log(id);

      this.$msgbox.confirm(
        "删除后的商圈信息将不会出现在商圈管理的列表中",
        "确定要删除该商圈的信息么？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).then(() => {
        that.$api.removeRegion({ id: id }).then(res => {
          console.log(res);
          if (res) {
            that.getList();
            that.$message.success('删除成功');
          }
        })

      }).catch(() => { });
    },

    getList(pageNumber) {
      let that = this;
      if (pageNumber) {
        that.param.pageNumber = pageNumber;
      }
      that.loading = true;
      console.log(this.param, 'this.param=====')
      that.$api.initProvinceList(this.param).then(res => {
        console.log(res);
        if (res) {
          this.list = res.records
          this.total = res.total;
        }
        that.loading = false;
      })
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.pageNumber = val;
      this.getList();
    },
  }
}
</script>
<style lang="scss" scoped>
.w300 {
  width: 300px !important;
}
.manage1 {
  padding: 25px 20px;
  .from {
    background: #f2f3f5;
    padding: 24px 16px 4px;
    margin-bottom: 20px;
  }
}
.manage2 {
  padding: 14px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
</style>